<template>
  <div>
    <el-form>
      <el-upload
        :limit="limit"
        action=""
        accept="image/*"
        :on-change="uploadFile"
        list-type="picture-card"
        :auto-upload="false"
        :file-list="fileList"
        :on-exceed="handleExceed"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        ref="upload"
        class="avatar-uploader"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog width="30%" :visible.sync="dialogVisible">
        <img width="100%" :src="toShowImageUrl" alt/>
      </el-dialog>
    </el-form>
  </div>
</template>

<script>
//引入上传图片接口
import {uploadFile} from "@/apis/common";

export default {
  props:{
    //这里面的数据可以再别的组件中引用时设置
    limit:{
      type: Number,
      default: 2 // 默认值
    }
  },
  data() {
    return {
      fileList: [],
      dialogVisible: false, //查看图片弹出框
      toShowImageUrl: "", //查看图片弹出框图片地址
    };
  },
  methods: {
    //父组件直接调用该组件设置文件的URL
    setFileList(fileURL) {
      const newFile = {
        name: "FG:" + fileURL, // 随便设置一个名字
        url: fileURL, // 使用服务器返回的图片URL
      };
      this.fileList.push(newFile);
    },
    //文件列表移除文件时的函数
    handleRemove(file, fileList) {
      // 触发自定义事件，并将 fileList 传递给父组件
      this.$emit('update-file-list', this.fileList);
      this.$notify.info("图片"+file.name+"移除成功！");
    },
    //点击文件列表中已上传的文件时的函数
    handlePictureCardPreview(file) {
      this.toShowImageUrl = file.url; // 假设file.url是正确的图片URL
      this.dialogVisible = true; // 显示对话框
    },
    //文件状态改变时的函数(主要逻辑函数)
    uploadFile(e, fileList) {
      const file = e.raw; // <- 这里是直接上传的
      //大小
      const size = file.size / 1024 / 1024 / 2;
      if (
        !(
          file.type === "image/png" ||
          file.type === "image/gif" ||
          file.type === "image/jpg" ||
          file.type === "image/jpeg"
        )
      ) {
        this.$notify.warning({
          name: "警告",
          message:
            "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片",
        });
      } else if (size > 2) {
        this.$notify.warning({
          name: "警告",
          message: "图片大小必须小于2M",
        });
      } else {
        const params = new FormData();
        params.append("file", file);
        uploadFile(params).then((res) => {
          if (res.data.code === 1) {
            this.$message.success("上传成功");
            // 创建一个新的文件对象并添加到fileList数组
            const newFile = {
              name: file.name, // 使用文件的原始名称
              url: res.data.data.url, // 使用服务器返回的图片URL
            };
            // 如果limit为1，清空数组后再添加新文件
            if (this.limit === 1) {
              this.fileList = [newFile];
            } else {
              // 否则，直接添加到数组
              this.fileList.push(newFile);
            }
            // 触发自定义事件，并将 fileList 传递给父组件
            this.$emit('update-file-list', this.fileList);
          } else {
            this.$message.error("上传失败: " + res.data.msg);
          }
        });
      }
    },
    //文件超出个数限制时的函数
    handleExceed(files, fileList) {
      this.$message.error(`最多只允许上传${this.limit}张图片`);
    },
  },
};
</script>

<style scoped>

</style>
